<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>欢迎页面</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <!-- <link rel="shortcut icon" href="../static/images/TG_logo.jpg" type="image/x-icon" /> -->
    <link rel="stylesheet" href="../static/css/font.css">
    <link rel="stylesheet" href="../static/css/xadmin.css">
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">

</head>

<body>
    <div class="x-body layui-anim layui-anim-up">
        <blockquote class="layui-elem-quote">欢迎管理员：
            <span class="x-red">test!</span>
            <a>
                <i class="lnr lnr-clock"></i>
                <span id="navbar_time"></span>
            </a>
        </blockquote>
        <fieldset class="layui-elem-field">
            <legend>数据统计</legend>
            <div class="layui-field-box">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body">
                            <div class="layui-carousel x-admin-carousel x-admin-backlog" lay-anim=""
                                lay-indicator="inside" lay-arrow="none" style="width: 100%; height: 90px;">
                                <div carousel-item="" id="shuju">
                                    <!-- <ul class="layui-row layui-col-space10 layui-this" id="shuju">
                                        <li class="layui-col-xs2">
                                        <a href="javascript:;" class="x-admin-backlog-body">
                                            <h3>用户数</h3>
                                            <p>
                                                <cite>66</cite></p>
                                        </a>
                                    </li>
                                    <li class="layui-col-xs2">
                                        <a href="javascript:;" class="x-admin-backlog-body">
                                            <h3>会员数</h3>
                                            <p><cite>12</cite></p>
                                        </a>
                                    </li>
                                    <li class="layui-col-xs2">
                                        <a href="javascript:;" class="x-admin-backlog-body">
                                            <h3>商品总类数</h3>
                                            <p><cite>99</cite></p>
                                        </a>
                                    </li>
                                    <li class="layui-col-xs2">
                                        <a href="javascript:;" class="x-admin-backlog-body">
                                            <h3>商品数</h3>
                                            <p><cite>67</cite></p>
                                        </a>
                                    </li>
                                    <li class="layui-col-xs2">
                                        <a href="javascript:;" class="x-admin-backlog-body">
                                            <h3>交易次数</h3>
                                            <p><cite>67</cite></p>
                                        </a>
                                    </li>
                                    <li class="layui-col-xs2">
                                        <a href="javascript:;" class="x-admin-backlog-body">
                                            <h3>访问数</h3>
                                            <p><cite>6766</cite></p>
                                        </a>
                                    </li>
                                    </ul> -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </fieldset>
        <fieldset class="layui-elem-field">
            <legend>系统统计</legend>
            <div id="main" style="width: 100%;height:400px;">
                <script src="https://cdn.bootcss.com/echarts/3.7.0/echarts.min.js"></script>
                <script type="text/javascript">
                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('main'));

                    // 指定图表的配置项和数据
                    var option = {
                        title: {
                            text: '月交易量折线图'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['地下城与勇士', '英雄联盟', '原神', '王者荣耀']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: ['一月', '三月', '五月', '七月', '九月', '十一月']
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name: '地下城与勇士',
                                type: 'line',
                                stack: '总量',
                                data: [120, 132, 101, 134, 90, 230]
                            },
                            {
                                name: '英雄联盟',
                                type: 'line',
                                stack: '总量',
                                data: [220, 182, 191, 234, 290, 330]
                            },
                            {
                                name: '原神',
                                type: 'line',
                                stack: '总量',
                                data: [150, 232, 201, 154, 190, 330]
                            },
                            {
                                name: '王者荣耀',
                                type: 'line',
                                stack: '总量',
                                data: [320, 332, 301, 334, 390, 330]
                            },

                        ]
                    };


                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);

                </script>

            </div>
        </fieldset>
</body>

<script src="../static/js/jquery.min.js"></script>
<script type="text/javascript">
    setInterval(getlocaltime, 1000);
    function getlocaltime() {
        var localtime = new Date();
        var yy = localtime.getFullYear();
        var mo = localtime.getMonth() + 1;
        var dd = localtime.getDate();
        var hh = localtime.getHours();
        var mm = localtime.getMinutes();
        var ss = localtime.getSeconds();

        mm = extra(mm);
        ss = extra(ss);

        document.getElementById("navbar_time").innerHTML
            = "现在的时间是:" + yy + "年" + mo + "月" + dd + "日" + "   " + hh + ":" + mm + ":" + ss;
    }
    function extra(x) {
        if (x < 10) {
            return "0" + x;
        } else {
            return x;
        }
    }
    $.ajax({
        type: 'get',
        url: 'http://127.0.0.1:8000/v1/TGadmin/get_data',
        dataType: 'json',
        success: function (data) {
            if (data.code == 200) {
                var html = ""
                // 2 数组遍历,将<tr><td>这样的标签和数据做动态的拼接
                $.each(data, function (index, obj) {
                    html = `
               <ul class="layui-row layui-col-space10 layui-this">
                            <li class="layui-col-xs2">
                            <a href="javascript:;" class="x-admin-backlog-body">
                                <h3>用户数</h3>
                                <p>
                                    <cite>`+ data['用户数'] + `</cite></p>
                            </a>
                        </li>
                        <li class="layui-col-xs2">
                            <a href="javascript:;" class="x-admin-backlog-body">
                                <h3>会员数</h3>
                                <p><cite>`+ data['会员数'] + `</cite></p>
                            </a>
                        </li>
                        <li class="layui-col-xs2">
                            <a href="javascript:;" class="x-admin-backlog-body">
                                <h3>商品数</h3>
                                <p><cite>`+ data['商品数'] + `</cite></p>
                            </a>
                        </li>
                        <li class="layui-col-xs2">
                            <a href="javascript:;" class="x-admin-backlog-body">
                                <h3>订单总数</h3>
                                <p><cite>`+ data['订单总数'] + `</cite></p>
                            </a>
                        </li>
                </ul>
               `
                });
                // 3 显示
                $('#shuju').html(html);
            }
        }
    });


    $.ajax({
        type: 'get',
        url: 'http://127.0.0.1:8000/v1/TGadmin/order_analyse',
        dataType: 'json',
        beforeSend: function (request) {
                    request.setRequestHeader("authorization", localStorage.getItem('TGshop_token'))
                },
        success: function (data) {
            // alert("order_analyse请求成功");
            $.each(data, function (index, obj) {
                // 3 显示
                $('#main').append(option.series);
            });
        }
    })



</script>

</html>